<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<style type="text/css">
			#div1 {
				width: 300px;
				height: 300px;
				background: red;
				margin: 10px;
			}
			
			#div2 {
				width: 300px;
				height: 300px;
				background: blue;
				margin: 10px;
			}
		</style>
	</head>

	<body>
		<input type="button" value="淡入" id="btn01" />
		<input type="button" value="淡出" id="btn02" />
		<input type="button" value="淡入/淡出" id="btn03" />
		<div id="div1">

		</div>
		<div id="div2">

		</div>
	</body>
	<script type="text/javascript">
		$('#btn01').click(function(){
			// 淡入
			$('#div1').fadeIn()
			$('#div2').fadeIn(2000)
		})
		$('#btn02').click(function(){
			// 淡出
			$('#div1').fadeOut(2000)
			$('#div2').fadeOut()
		})
		$('#btn03').click(function(){
			// 淡入
			$('#div1').fadeToggle(2000)
			$('#div2').fadeToggle(2000)
		})
	</script>

</html>